<template>
  <div class="app-header">
    <div class="container">
      <router-link class="logo" to="/"/>
      <ul class="nav-header">
        <li class="home">
          <router-link to="/" exact-active-class="active">首页</router-link>
        </li>
        <li v-for="firCate in cateList" :key="firCate.id">
          <router-link :to="`/category/${firCate.id}`"
                       active-class="active">
            {{ firCate.name }}
          </router-link>
          <div v-if="firCate.children" class="sec-category container">
            <div>
              <router-link v-for="secCate in firCate.children"
                 :key="secCate.id"
                 :to="`/category/sub/${secCate.id}`">
                <img v-lazy="secCate.picture">
                <p>{{ secCate.name }}</p>
              </router-link>
            </div>
          </div>
        </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜"/>
      </div>
      <div class="cart">
        <i class="iconfont icon-cart" @click="$router.push('/cart')"></i>
        <div class="count">{{cartLength}}</div>
        <div class="cart-body">
          <head-cart/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeadCart from '@/components/library/HeadCart.vue'
import {useCartStore} from '@/stores/cart'
import {useCategoryStore} from '@/stores/category'
import {storeToRefs} from 'pinia'

let cateStore = useCategoryStore()
let cartStore = useCartStore()
let {length: cartLength} = storeToRefs(cartStore)
let {list: cateList} = storeToRefs(cateStore)
</script>

<style scoped lang="less">
.app-header {
  position: sticky;
  z-index: 10;
  top: 0;
  height: 100px;
  background-color: #fff;

  > .container {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;

    .logo {
      display: block;
      width: 200px;
      height: 100%;
      background: url('../assets/images/logo.png') no-repeat center 4px / contain;
    }

    .nav-header {
      padding-left: 40px;
      display: flex;
      align-items: center;

      > li {
        margin-right: 40px;

        > a {
          display: block;
          font-size: 16px;
          line-height: 32px;
          border-bottom: 1px solid transparent;

          &:hover {
            color: @xtxColor;
            border-bottom-color: @xtxColor;

            & ~ .sec-category {
              height: 132px;
              opacity: 1;
            }
          }

          &.active {
            color: @xtxColor;
            border-bottom-color: @xtxColor;
          }
        }

        .sec-category {
          position: absolute;
          transition: all .2s .2s;
          overflow: hidden;
          left: 0;
          top: 100%;
          height: 0;
          opacity: 0;
          background-color: rgba(255,255,255,.6);
          transform: translateY(-10px);
          box-shadow: 0 0 5px #ccc;

          &:hover {
            height: 132px;
            opacity: 1;
          }

          > div {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 70px;
            margin: 21px 0;

            a {
              display: flex;
              width: 110px;
              height: 90px;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              &:hover {
                color: @xtxColor;
              }

              img {
                width: 60px;
                height: 60px;
              }

              p {
                padding-top: 10px;
              }
            }
          }
        }
      }
    }

    .search {
      flex: 1;
      margin-right: 20px;
      min-width: 170px;
      max-width: 220px;
      height: 32px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;

      i {
        font-size: 18px;
      }

      input {
        padding-left: 5px;
        flex: 1;
      }
    }

    .cart {
      display: block;
      position: relative;

      &:hover {
        .cart-body {
          height: 430px;
        }
      }

      i {
        font-size: 22px;
        cursor: pointer;
      }

      .count {
        position: absolute;
        font-size: 12px;
        line-height: 14px;
        right: -13px;
        top: -2px;
        background-color: #e26237;
        padding: 0 6px;
        color: white;
        border-radius: 10px;
      }

      .cart-body {
        display: flex;
        justify-content: center;
        position: absolute;
        box-sizing: unset;
        width: 420px;
        overflow: hidden;
        height: 0;
        transition: all 1s;
        top: 100%;
        right: -22px;
      }
    }
  }
}
</style>